<template>
	<view class="container" v-show="isShowIndex">
		<!-- 状态栏 -->
		<view class="status" :style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>
		<!-- 头部信息 -->
		<view class="user_info" :class="{sm}" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
			<view class="img"><image :src="userInfoDetail.avatar ? userInfoDetail.avatar : '/static/missing-face.png'"></image></view>
			<view class="text">{{ userInfoDetail.nickname || '游客'}}</view>
			<view class="iconfont icontongzhi ic">
				<!-- <view class="bage">···</view> -->
				<!-- <view class="bage">3</view> -->
			</view>
		</view>
		<view class="user_info_seat"></view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange" indicator-dots="true">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<!-- <view class="indicator">
					<view
						class="dots"
						v-for="(swiper, index) in swiperList"
						:class="[currentSwiper >= index ? 'on' : '']"
						:key="index"
					></view>
				</view> -->
				
				
			</view>
		</view>
		
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="toActivityList('more')">
				<image src="/static/temp/huodong.png"></image>
				<text>活动报名</text>
			</view>
			<view class="cate-item" @click="toWhere(1)">
				<image src="/static/temp/xueyuan.png"></image>
				<text>线上课程</text>
			</view>
			<view class="cate-item" @click="toWhere(2)">
				<image src="/static/temp/shangcheng.png"></image>
				<text>优选商城</text>
			</view>
			<view class="cate-item" @click="toWhere(3)">
				<image src="/static/temp/youyong.png"></image>
				<text>亲子游泳</text>
			</view>
			<view class="cate-item" @click="toWhere(4)">
				<image src="/static/temp/yingdi.png"></image>
				<text>儿童营地</text>
			</view>
		</view>
		<!-- 完善资料 -->
		<view class="go_data" @click="toWhere(5)" v-if="!isCompletion">
			<view class="img"><image src="/static/temp/icon_1.png"></image></view>
			<view class="text">为确保您的课程与相应门店匹配，<br>请您尽快完善身份信息</view>
			<view class="go">去完善 <view class="iconfont iconiconfont07"></view></view>
		</view>
		 <!-- 广告位 -->
		<view class="ad-1">
			<image src="/static/temp/ad-1.png" @click="toOrder"></image>
			<image src="/static/temp/ad-2.png" @click="toWhere(6)"></image>
		</view>
		<!-- 最新活动标题 -->
		<view class="list-title">
			<text class="left">最新活动</text>
			<view class="right" @click="toActivityList('more')" v-show="newActivityList.length >= 5">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 最新活动列表 -->
		<view class="list-activity">
			<noactive v-if="newActivityList <= 0"></noactive>
			<view class="item" v-for="item in newActivityList" :key="item.id" @click="toActivityList(item)">
				<image :src="item.banner" class="left"></image>
				<view class="right">
					<view class="title" style="height: 40px;font-weight: 600;">
						<label class="ing" v-if="item.activity_status==='报名中'">报名中</label>
						<label class="full" v-if="item.activity_status==='已报满'">已报满</label>
						<label class="wait" v-if="item.activity_status==='等位中'">等位中</label>
						{{ item.title }}
					</view>
					<text class="subtitle" style="font-weight: normal;">{{ item.subtitle }}</text>
				</view>
			</view>
			<!-- <view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="done">已结束</label>月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view>
			<view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="full">已报满</label>6月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view>
			<view class="item">
				<image src="/static/temp/ad-1.png" class="left"></image>
				<view class="right">
					<view class="title"><label class="wait">等位中</label>6月23日周日9：00多感官体验大挑战极限乐趣 快快报名</view>
					<text class="subtitle">扣课2节 材料费30元</text>
				</view>
			</view> -->
		</view>
		
		<!-- 从这里开始注释 -->
		
		
		
		<!-- 线上课程标题 -->
		<view class="list-title">
			<text class="left">线上课程</text>
			<view class="right" @click="toWhere(9)">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 线上课程列表 -->
		<view class="list-course">
			<image src="https://oss.laiba.shop/system/images/kecheng01.png" @click="toWhere(7)"></image>
			<image src="https://oss.laiba.shop/system/images/kecheng02.png" @click="toWhere(8)"></image>
		</view>
		<!-- 优选活动标题 -->
		<view class="list-title">
			<text class="left">优选活动</text>
			<view class="right" @click="toWhere(2)">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 优选活动列表 -->
		<view class="list-good">
			<view class="item" @click="toWhere(10)">
				<image src="https://oss.laiba.shop/system/images/youxuanhuodong01.png"></image>
			</view>
			<view class="item self">
				<image src="https://oss.laiba.shop/system/images/youxuanhuodong02.png" @click="toWhere(11)"></image>
				<image src="https://oss.laiba.shop/system/images/youxuanhuodong03.png" @click="toWhere(12)"></image>
			</view>
		</view>
		<!-- 分类 -->
		<!-- <view class="cate-section">
			<view class="cate-item">
				<image src="/static/temp/c1.png"></image>
				<text>活动报名</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c2.png"></image>
				<text>线上课程</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c3.png"></image>
				<text>优选商城</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c4.png"></image>
				<text>亲子游泳</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c5.png"></image>
				<text>儿童营地</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c1.png"></image>
				<text>活动报名</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c2.png"></image>
				<text>线上课程</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c3.png"></image>
				<text>优选商城</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c4.png"></image>
				<text>亲子游泳</text>
			</view>
			<view class="cate-item">
				<image src="/static/temp/c5.png"></image>
				<text>儿童营地</text>
			</view>
		</view> -->
		<!-- 达人好物推荐 -->
		<view class="list-title">
			<text class="left">达人好物推荐</text>
			<view class="right" @click="toWhere(14)">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<!-- 推荐文章顶图 -->
		<!-- <image src="../../static/temp/tuijian.png" class="tuijian_img"></image> -->
		<!-- 推荐文章列表 -->
		<view class="list-introduce">
			<view class="item" v-for="item in goodListArticle" :key="item.id" @click="gotoGoodsArt(item)">
				<view class="imgs">
					<image :src="img" v-for="(img, index) in item.images" :key="index"></image>
					<!-- <image src="/static/temp/ad-2.png"></image>
					<image src="/static/temp/ad-1.png"></image> -->
				</view>
				<view class="title">{{ item.title}}</view>
				<view class="subtitle">
					<view class="img"><image :src="item.avatar" style="border-radius: 50%;"></image></view>
					<view class="text">{{ item.nickname }}</view>
					<view class="more">查看全文</view>
				</view>
			</view>
			<!-- <view class="item">
				<view class="imgs">
					<image src="/static/temp/ad-1.png" mode="aspectFill"></image>
					<image src="/static/temp/ad-2.png" mode="aspectFill"></image>
					<image src="/static/temp/ad-1.png" mode="aspectFill"></image>
				</view>
				<view class="title">他家的12M+三色芝士心饭团，能给孩子当手指食物美味与美貌并存，宝妈快快买来做！</view>
				<view class="subtitle">
					<view class="img"><image :src="userInfoDetail.avatar" style="border-radius: 50%;"></image></view>
					<view class="text">LQ</view>
					<view class="more">查看全文</view>
				</view>
			</view> -->
		</view>
		<!-- 养娃必读 -->
		<view class="list-title" style="margin-top: 50rpx;padding-bottom: 16rpx;">
			<text class="left">养娃必读</text>
			<view class="right" @click="toWhere(13)">更多 <view class="iconfont iconiconfont07"></view></view>
		</view>
		<view class="article-list">
			<view class="article" v-for="art in momListArticle" :key="art.id" @click="gotoGoodsArt(art)">
				<view class="article-l">
					<image :src="art.images[0]" mode="" style="border-radius: 12rpx;"></image>
				</view>
				<view class="article-r">
					<text>{{ art.title }}</text>
					<text>{{ art.content.slice(0,60) }}</text>
				</view>
			</view>
			<!-- <view class="article">
				<view class="article-l">
					<image src="/static/temp/ad-1.png" mode=""></image>
				</view>
				<view class="article-r">
					<text>把孩子当植物养后</text>
					<text>昨天，听到邻居家的妈妈怒吼着让孩子背古诗：“你看谁谁谁，人家比你还小，已经会背几十首</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { login, getActivityList, getUserInfo, getBase, getWxConfig, getArticle } from '../../api/index.js'
	import noactive from '../../components/no-active.vue'
	import wx from '../jweixin/index.js'
	export default {
		data() {
			return {
				afterHeaderOpacity: 1,//不透明度
				headerPosition: 'fixed',
				headerTop:null,
				statusTop:null,
				currentSwiper: 0,
				sm:"",
				// 轮播图片
				// swiperList: [
				// 	{ id: 1, src: 'url1', img: '../../static/temp/banner1.jpg' },
				// 	{ id: 2, src: 'url2', img: '../../static/temp/banner2.jpg' },
				// 	{ id: 3, src: 'url3', img: '../../static/temp/banner3.jpg' },
				// 	{ id: 4, src: 'url4', img: '../../static/temp/banner4.jpg' }
				// ],
				swiperList: [
					// { id: 2, src: 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=112', img: 'https://oss.laiba.shop/%E7%B3%BB%E7%BB%9F%E5%9B%BE%E7%89%87%E8%AF%AF%E5%88%A0/WechatIMG11448.jpeg' },
					// { id: 4, src: 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=116', img: 'https://oss.laiba.shop/system/images/melon.jpg' },
					{ id: 5, src: 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=116', img: 'https://oss.laiba.shop/system/images/mango.jpg' },
					// { id: 1, src: 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=115', img: 'https://oss.laiba.shop/system/images/WechatIMG11640.jpeg' },
					// { id: 3, src: '新年快乐', img: 'https://oss.laiba.shop/activity/20200103/%E6%96%B0%E5%B9%B4%E5%A4%B4%E5%9B%BE.jpg' }
				],
				newActivityList: [],
				userInfoDetail: {},
				isCompletion: false,
				isShowIndex: false, // 是否授权
				goodListArticle: [],
				momListArticle: []
				
			};
		},
		components: {
			noactive
		},
		// 页面加载完成后会进行调用
 		onLoad: function (options) {
		
			// 是否补全资料
			getBase({}, (res) => {
				if (res.code === 0) {
					this.isCompletion = res.data.isCompletion
				}
			})
			let data = {
				length: 5
			}
			// 获取活动列表
			getActivityList(data, (res) => {
				console.log(res)
				if(res.code === 3) {
					uni.showToast({
			　　　　　　 title: res.message,
			　　　　　　 icon: 'none'
			　　　　 })
					window.location.href = 'https://mobile.laiba.shop/activity/visitor/auth?url=https://mobile.laiba.shop/html/'
					// window.location.href = 'http://hd.laiba.shop/activity/visitor/auth?url=http://hd.laiba.shop/html/'
					var page = getCurrentPages().pop()
					if (page == undefined || page == null) return
					page.onLoad()
				} else {
					if (res.code === 0) {
						this.newActivityList = res.data.list
						this._getUserInfo() // 获取当前会员信息
						this.isShowIndex = true
						this._getWxConfig() // 分享
						this._getArticleGoods() // 获取帖子列表达人好物推荐
						this._getArticleMom() // 获取帖子列表达人底部文章
					}
				}
			})
			
			// const value = uni.getStorageSync('userInfo');
			// console.log(value);
			// if (!value) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '您尚未绑定信息，是否现在去绑定',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				uni.navigateTo({
			// 					url: '/pages/userinfo/userinfo'
			// 				})
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 			}
			// 		}
			// 	})
			// } else {
			// 	console.log("用户登入了")
			// 	this._getActivityList();
			// }
			
			
			// console.log(258)
			// setTimeout(() => {
			// 	console.log('start pulldown');
			// }, 1000);
			// uni.startPullDownRefresh();
			// 	login({mobile:13333333333,password:123456}, (res) => {
			// 		console.log('用户' + res)
			// 		if(res.data.code === 3) {
			// 			uni.showToast({
			// 	　　　　　　 title: res.data.message,
			// 	　　　　　　 icon: 'none'
			// 	　　　　 })
			// 			setTimeout(() => {
			// 				uni.navigateTo({
			// 					url: '/pages/public/login'
			// 				})
			// 			},500)
			// 		}
			// 	},(err) => {
			// 		uni.showToast({
			// 　　　　　　 title: err,
			// 　　　　　　 icon: 'none'
			// 　　　　 })
			// 	})
			
			
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			// //兼容iOS端下拉时顶部漂移
			// this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			// this.headerTop = e.scrollTop>=0?null:0;
			// this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
			this.sm = e.scrollTop >= 100 ? "sm" : ""
		},
		methods: {
			_getWxConfig() {
				getWxConfig({}, (res) => {
					console.log(res)
					let data = {
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature,// 必填，签名
						// jsApiList: ['updateAppMessageShareData','updateTimelineShareData','downloadImage'] ,// 必填，需要使用的JS接列表
						jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','downloadImage'] // 必填，需要使用的JS接口列表
					}
					
					wx.config(data)
					wx.ready( () => {
						if (location.href.includes('?from')) {
							let sLink = location.href.split('?')
							window.location.href = 'https://mobile.laiba.shop/html/#/'
						}
						// this.newUrl = location.href
						wx.onMenuShareAppMessage({ 
						    title: '来爸来妈优选', // 分享标题
						    desc: '点击进入', // 分享描述
						    link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
						    success: () => {
						      // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
						    }
						})
						wx.onMenuShareTimeline({
							title: '来爸来妈优选', // 分享标题
							link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
							success: () => {
							  // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
							}
						})
					})
				})
			},
			// 线上课程，优选商城，亲子游泳，儿童营地
			toWhere(item) {
				if (item === 1) {
					window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&do=index&m=dg_chat'
				} else if (item === 2) {
					// window.location.href = 'https://mobile.laiba.shop/html/#/pages/shopping/shopping'
					uni.switchTab({
						url: '/pages/shopping/shopping'
					})
				} else if (item === 3) {
					window.location.href = 'http://56033258.m.weimob.com/weisite/home?pid=56033258&bid=57196954&wechatid=fromusername'
				} else if (item === 4) {
					window.location.href = 'http://m.mycamp.com.cn/'
				} else if (item === 5) {
					uni.navigateTo({
						url: '/pages/userinfo/userinfo'
					})
				} else if (item === 6) {
					window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=jiangli.userlist'
				}
				else if (item === 7) {
					window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&topic_id=33&do=topic_info&m=dg_chat'
				}
				else if (item === 8) {
					window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&topic_id=34&fuid=3&do=topic_info&m=dg_chat'
				}
				else if (item === 9) {
					window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&do=index&m=dg_chat'
				}
				else if (item === 10) {
					window.location.href = 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=105'
				}
				else if (item === 11) {
					window.location.href = 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=113'
				}
				else if (item === 12) {
					window.location.href = 'https://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=114'
				}
				else if (item === 13) {
					window.location.href = 'https://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=sns.board&id=1'
				}else if (item === 14) {
					window.location.href = 'http://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=sns.board&id=2'
				}
			},
			// 获取当前会员信息
			_getUserInfo() {
				let data = {}
				getUserInfo(data, (res) => {
					console.log(789)
					console.log(res)
					console.log(789)
					this.userInfoDetail = res.data.member
					uni.setStorage({
					    key: 'userInfo',
					    data: this.userInfoDetail,
					    success: ()=> {
					        console.log('用户信息设置成功');
					    }
					});
				})
			},
			// 我的订单页
			toOrder() {
				uni.navigateTo({
					url: '/pages/order/order?state=0'
				})
			},
			//轮播图跳转
			toSwiper(e) {
				console.log(e)
				// uni.showToast({ title: e.src, icon: 'none' });
				if (e.src === '新年快乐') {
					uni.showToast({ title: e.src, icon: 'none' });
				} else {
					// window.location.href = 'http://m.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=112'
					window.location.href = e.src
				}
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			// 最新活动 右边的更多，跳转到列表页
			toActivityList(data) {
				console.log(data)
				if (data === 'more') {
					uni.switchTab({
						url: `/pages/active/list`
					})
				} else{
					uni.navigateTo({
						url: `/pages/active/detail?id=` + data.id
					})
				}
			},
			// 获取帖子列表
			_getArticleGoods() {
				const data = {bid: 2,length:5}
				getArticle(data, (res) => {
					console.log('----------------------------')
					console.log(res)
					this.goodListArticle = res.data
					console.log('----------------------------')
				})
			},
			_getArticleMom() {
				const data = {bid: 1,length:5}
				getArticle(data, (res) => {
					console.log('++++++++++++++++++++++++++++')
					console.log(res)
					this.momListArticle = res.data
					console.log('++++++++++++++++++++++++++++')
				})
			},
			// 达人好物推荐
			gotoGoodsArt(data) {
				console.log(data)
				window.location.href = data.url
			}
		}
		
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	.user_info_seat{
		height: 150upx;
		/*  #ifdef  APP-PLUS  */
		height: 200upx; //覆盖样式
		/*  #endif  */
	}
	/* 头部信息 早，... */
	.user_info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:$page-row-spacing;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		transition: all 0.5s;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.img{
			transition: all 0.5s;
			width: 50upx;
			height: 50upx;
			border-radius: 50upx;
			margin-right: 22upx;
			image{
				transition: all 0.5s;
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
			}
		}
		.text{
			transition: all 0.5s;
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			font-size: 48upx;
			color: #333;
			font-weight: bold;
		}
		.ic{
			transition: all 0.5s;
			font-size: 48upx;
			position: relative;
			.bage{
				transition: all 0.5s;
				background: #fe8700;
				color: #fff;
				font-size: 24upx;
				position:absolute;
				top:-25%;
				right:-25%;
				height: 32upx;
				border-radius: 50upx;
				padding:0 13upx;
			}
		}
		&.sm{
			// transform:scale(.465);
			padding:17upx 36upx;
			.img{
				transform:scale(.75);
				// width: 40upx;
				// height: 40upx;
				// border-radius: 50upx;
				// margin-right: 22upx;
				// image{
				// 	width: 40upx;
				// 	height: 40upx;
				// }
			}
			.text{
				transform:scale(0.75) translateX(-20%);
				// font-size: 36upx;
				
			}
			.ic{
				// font-size: 36upx;
				// position: relative;
				transform:scale(.75);
				.bage{
					transform:scale(.75);
					// background: #fe8700;
					// color: #fff;
					// font-size: 20upx;
					// position:absolute;
					// top:-25%;
					// right:-25%;
					// height: 32upx;
					// border-radius: 50upx;
					// padding:0 13upx;
				}
			}
		}
	}
	/* 顶部轮播图 */
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height: 44.44vw;	
			overflow: hidden;
			border-radius: 15upx;
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			margin: 0 $page-row-spacing;
			swiper {
				width: 100%;
				height: 44.44vw;
				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					margin: 0 5rpx;
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/4);
						// width: 20rpx;
					}
				}
			}
		}
	}	
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap:wrap;
		padding: 17upx $page-row-spacing - 10upx; 
		// background: #fff;
		.cate-item {
			display: flex;
	 		flex-direction: column;
			align-items: center;
			font-size: $font-sm - 2upx;
			color: $font-color-dark;
			min-width: 20%;
			margin: 18upx 0;
		}
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}
	/*完善资料*/
	.go_data{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:17upx $page-row-spacing;
		margin-bottom: $page-row-spacing;
		background: #fff9f2;
		border-radius: 12upx;
		padding: 29upx;
		.img{
			width: 78upx;
			height: 78upx;
			border-radius: 50upx;
			margin-right: 22upx;
			image{
				width: 78upx;
				height: 78upx;
			}
		}
		.text{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			font-size: 26upx;
			line-height: 41upx;
			color: #fe8700;
		}
		.go{
			background: #fe8700;
			color: #fff;
			font-size: 20upx;
			border-radius: 6upx;
			padding: 3upx 13upx;
			line-height:30upx;
			.iconfont{
				font-size: 18upx;
				display: inline-block;
				vertical-align: baseline;
				line-height:30upx;
			}
			&:active{
				background: #df7700;
				color: #e0e0e0;
			}
		}
	}
	/* 广告位 */
	.ad-1{
		width: 100%;
		height: 24vw; 
		padding: 17upx 25upx;
		// background: #fff;
		display: flex;
		image{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			margin: 0 11upx;
			height: 100%;
			border-radius: 12upx;
		}
	}
	/*列表标题*/
	.list-title{
		margin-top: 36upx;
		margin-bottom: 13upx;		
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0 $page-row-spacing;
		.left{
			color: $font-color-dark;
			font-size: 40upx;
			font-weight: bold;
		}
		.right{
			font-size: $font-sm;
			color: #999;
			.iconfont{
				display: inline-block;
				vertical-align: baseline;
				font-size: $font-sm;
			}
		}
	}
	/*活动列表*/
	.list-activity{
		padding: 0 $page-row-spacing;
		.item{
			padding: 14upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 10rpx 34rpx 0px rgba(0, 0, 0, 0.06);
			padding: 24rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			.left{
				width: 200upx;
				height: 150upx;
				border-radius:12upx;
				overflow: hidden;
			} 
			.right{
				margin-left: 20upx;
				flex: 1;
				.title{
					font-size: 28upx;
					color: $font-color-dark;
					height: 80upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					label{
						display: inline-block;
						font-size: 20upx;
						border-radius: 4upx;
						margin-right: 14upx;
						padding: 8upx 12upx;
						line-height:17upx;
						height: 30upx;
						&.ing{
							background: linear-gradient(to right, #42e55e , #36d248);
							color: #fff;
						}
						&.done{
							background: #e5e5e5;
							color: #989898;
						}
						&.full{
							background: linear-gradient(to right, #fb4d69 , #ff4455);
							color: #fff;
						}
						&.wait{
							background: linear-gradient(to right, #ff9e2c , #fe8700);
							color: #fff;
						}
					}
				}
				.subtitle{
					font-size: 22upx;
					color: #b3b3b3;
					margin-top:24upx;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
			}
		}
		
	}
	/*线上课程列表*/
	.list-course{
		width: 100%;
		height: 29vw; 
		padding: 17upx 25upx;
		// background: #fff;
		display: flex;
		image{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			margin: 0 11upx;
			height: 100%;
			border-radius: 12upx;
		}
	}
	/*优选活动列表*/
	.list-good{
		width: 100%;
		height:60vw;
		padding: 17upx 25upx;
		// background: #fff;
		display: flex;
		.item{
			width: 0;
			-webkit-box-flex: 1;
			-ms-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			margin: 0 11upx;
			height:100%;
			image{
				width:100%;
				height:100%;
				border-radius: 12upx;
			}
			&.self{
				flex-direction: column;
				display: flex;
				justify-content: space-between;
				image{
					height: 27vw; 					
				}
			}
		}
	}
	/*推荐文章顶图*/
	.tuijian_img{
		padding: 0 $page-row-spacing;
		margin: 17upx 0;
		width: 100%;
		height: 10vw;
	}
	.list-introduce{
		padding: 0 $page-row-spacing;
		// margin: 17upx 0;
		margin-top: 17upx;
		.item{
			box-shadow: 0px 10rpx 34rpx 0px rgba(0, 0, 0, 0.06);
			padding: 24rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			.imgs{
				display: flex;
				align-items: center;
				justify-content:space-between;
				height: 28.355vw;
				image{
					width: 100%;
					height: 100%;
					margin-right: 20upx;
					border-radius: 20upx;
					&:last-child{
						margin-right: 0;
					}
				}				
			}
			.title{
				font-size: 28upx;
				color: $font-color-dark;
				margin:28upx 0;
				// height: 80upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-weight: 600;
			}
			.subtitle{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;				
				font-size: 24upx;
				color: #808080;
				// padding-bottom: 50upx;
				.img{
					width: 36upx;
					height: 36upx;
					border-radius: 50upx;
					margin-right: 10upx;
					image{
						width: 36upx;
						height: 36upx;
					}
				}
				.text{
					width: 0;
					-webkit-box-flex: 1;
					-ms-flex: 1;
					-webkit-flex: 1;
					flex: 1;
				}
				.more{
				}
			}
		}
	}
	.article-list {
		padding: 0 $page-row-spacing;
		margin: 17upx 0;
		.article {
			// height: 150rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			box-shadow: 0px 10rpx 34rpx 0px rgba(0, 0, 0, 0.06);
			padding: 24rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			.article-l {
				width: 200rpx;
				height: 150rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
				image {
					width: 200rpx;
					height: 150rpx;
				}
			}
			.article-r {
				display: flex;
				flex-direction: column;
				font-family: PingFangSC-Regular;
				justify-content: space-between;
				text:first-child {
					font-size: 28rpx;
					color: #032545;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-weight: 600;
				}
				text:last-child {
					font-size: 22rpx;
					color: #b3b3b3;
					padding-top: 10rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
	
</style>
